<template>
  <div>
    <!-- MostExpected start -->
    <MostExpected :list="list"></MostExpected>
    <!-- MostExpected end -->
    <!-- 分隔符开始 -->
    <div class="seperator"></div>
    <!-- 分隔符结束 -->
    <!-- 时间列表开始 -->
    <div class="mv-list">
      <div class="mv-list-item" v-for="(item, key) in groupList" :key="key">
        <div class="comming-title">{{ item[0].comingTitle }}</div>
        <MovieList :list="item"></MovieList>            
      </div>
    </div>
    <!-- 时间列表结束 -->
  </div>
</template>

<script>
import MostExpected from "@/components/MostExpected.vue";
import MovieList from '@/components/MovieList.vue';
import _ from "lodash";
export default {
  props: ["list"],
  components: { MostExpected , MovieList},
  computed: {
    groupList: function () {
      return _.groupBy(this.list, function (v) {
        return v.rt;
      });
      // return obj;
    },
  },
};
</script>

<style lang="less" scoped>
@import url('@/assets/border.less');
.mv-comming {
	.seperator {
		height: 0.1rem;
		background: #f5f5f5;
		margin: 0.05rem 0;
		.border-1px(1px 0 1px 0,#eee);
	}
}
</style>